<template>
  <div>
    <el-dialog
      :visible="isShowDialog"
      :title="`${formData.id?'编辑':'添加'}客户`"
      :destroy-on-close="true"
      @close="btnClose"
    >
      <el-form ref="formData" :model="formData" :rules="rules">
        <el-form-item label="经纪" prop="agent">
          <el-select v-model="formData.agent" :placeholder="formData.agent+''">
            <el-option v-for="item in agentsList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" style="width:90%" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" style="width:90%" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone" style="width:90%" />
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="formData.wechat" style="width:90%" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" style="width:90%" />
        </el-form-item>
        <el-form-item label="封面">
          <ImageUpload ref="formDataPhoto" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="end">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnOk">确定</el-button>
          <el-button size="small" @click="btnClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addClients, editClients, updateClients } from '@/api/clients'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    agentsList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      formData: {
        agent: '',
        created_at: '',
        desc: '',
        email: '',
        id: '',
        image: '',
        name: '',
        phone: '',
        updated_at: '',
        wechat: ''
      },
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 1, max: 4, message: '姓名为1-4位' }],
        email: [
          { message: '邮箱不能为空', trigger: 'blur' },
          { pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/, message: '邮箱格式不正确', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, {
          pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'
        }],
        wechat: [
          { required: true, message: '微信不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {

  },
  methods: {
    async btnOk() {
      try {
        const fileList = this.$refs.formDataPhoto.fileList
        await this.$refs.formData.validate()
        this.formData.image = fileList.length ? fileList[0].url : ''

        if (this.formData.id) {
          await updateClients(this.formData)
          this.$message.success('编辑成功')
        } else {
          await addClients(this.formData)
          this.$message.success('添加成功')
        }
        this.$emit('update:isShowDialog', false)
        this.$emit('addClients')
      } catch (error) {
        console.log(error)
      }
    },
    async btnClose() {
      await Object.assign(this.$data.formData, this.$options.data().formData)
      this.$emit('update:isShowDialog', false)
    },
    async editClients(id) {
      this.formData = await editClients(id)
      if (this.formData.image) {
        this.$refs.formDataPhoto.fileList = [
          { url: this.formData.image }
        ]
      }
    }

  }
}
</script>

<style>

</style>
